{% extends "base.html" %}

{% block title %}忘记密码 - 个人工具网站集{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <div class="mx-auto h-12 w-12 bg-orange-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-key text-orange-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">忘记密码</h2>
                <p class="text-gray-600">输入您的邮箱地址，我们将发送重置密码的链接</p>
            </div>
            
            <!-- 消息提示 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="mb-6">
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else category }} rounded-lg p-4 mb-4">
                                {% if category == 'error' %}
                                    <div class="flex items-center">
                                        <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
                                        <span class="text-red-700">{{ message }}</span>
                                    </div>
                                {% elif category == 'success' %}
                                    <div class="flex items-center">
                                        <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                        <span class="text-green-700">{{ message }}</span>
                                    </div>
                                {% else %}
                                    <div class="flex items-center">
                                        <i class="fas fa-info-circle text-blue-500 mr-3"></i>
                                        <span class="text-blue-700">{{ message }}</span>
                                    </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}
            
            <!-- 重置密码表单 -->
            <form method="POST" id="forgotPasswordForm" class="space-y-6">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-envelope mr-2"></i>邮箱地址
                    </label>
                    <input type="email" id="email" name="email" required 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-colors"
                           placeholder="请输入您的邮箱地址">
                </div>
                
                <div>
                    <button type="submit" 
                            class="w-full bg-orange-600 text-white py-3 px-4 rounded-lg hover:bg-orange-700 focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition-colors font-medium">
                        <i class="fas fa-paper-plane mr-2"></i>发送重置链接
                    </button>
                </div>
            </form>
            
            <!-- 返回登录 -->
            <div class="mt-6 text-center">
                <a href="{{ url_for('login') }}" class="text-blue-600 hover:text-blue-500 font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>返回登录
                </a>
            </div>
            
            <!-- 其他选项 -->
            <div class="mt-8 pt-6 border-t border-gray-200">
                <div class="text-center space-y-2">
                    <p class="text-sm text-gray-600">还没有账户？</p>
                    <a href="{{ url_for('register') }}" class="text-blue-600 hover:text-blue-500 font-medium">
                        立即注册
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 表单验证
document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {
    const email = document.getElementById('email').value.trim();
    
    if (!email) {
        e.preventDefault();
        alert('请输入邮箱地址');
        return;
    }
    
    // 简单的邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        e.preventDefault();
        alert('请输入有效的邮箱地址');
        return;
    }
});

// 回车键提交
document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        document.getElementById('forgotPasswordForm').submit();
    }
});
</script>
{% endblock %}